<template>
  <div>
    <header>
      <svg class="icon" @click="backHome">
        <use xlink:href="#icon-caidan"></use>
      </svg>
      <svg class="icon" @click="goSearch">
        <use xlink:href="#icon-sousuo"></use>
      </svg>
    </header>
    <div v-if="!search" class="content">
      <h3>选择你想援助的公益组织:</h3>
      <div class="wrapper">
        <div class="logo">
          <img v-for="value in organs" :src="'http://47.97.102.73/giraffe' + value.imgUrl"
          @click="toActive(value.id)" :key="value.id"
          :class="[value.id === active ? 'active' : '']">
        </div>
      </div>
      <footer>
        <button @click="goHomeIndex">选择后离开 >></button>
      </footer>
    </div>
    <div v-else class="content">
      <input class="searchBox" type="text"
      v-model="searchWords" placeholder="搜索公益组织"
      @change="searchOrgan">
      <div v-if="searchResults.length !== 0" class="wrapper">
        <div class="logo">
          <img v-for="value in searchResults" :src="value.imgUrl"
          @click="toActive(value.id)" :key="value.id"
          :class="[value.id === active ? 'active' : '']">
        </div>
      </div>
      <div v-if="doSearch" class="invite">
        <p>抱歉，我们暂时没有匹配到<span>{{searchWords}}</span>，是想让我们邀请该公益组织加入吗？</p>
        <div class="doInvite" @click="goBack">是的，邀请</div>
      </div>
      <div></div>
    </div>
  </div>
</template>

<script>
import {addOrgan, findOrgan, changeOrgan, findOrganByName} from '@/api/organization'
import {check} from '@/api/common'

export default {
  name: 'myAim',
  data () {
    return {
      active: -1,                      // 选中标记
      vuegConfig: {
        disable: false,
        forwardAnim: 'fadeInRight',
        backAnim: 'fadeInLeft'
      },                               // vug动画效果，无需改动
      search: false,                   // 搜索开关
      searchWords: '',                 // 搜索的关键词
      organs: [],                      // 所有的公益组织列表
      searchResults: [],               // 搜索结果
      doSearch: false                  // 确认搜索后
    }
  },
  created () {
    this.initial()
  },
  methods: {
    backHome () {
      this.$emit('showMeun')
    },                                // 返回主菜单
    toActive (id) {
      this.active = id
    },                                // 选中某一个组织
    goSearch () {
      this.search = true
    },                                // 搜索
    goHomeIndex () {
      let formData = {
        data: {
          organId: this.active,
          uid: localStorage.uid
        },
        token: localStorage.token
      }
      changeOrgan(JSON.stringify(formData)).then(
        (data) => {
          var info = check(data)
          if (typeof (info) === 'boolean') {
            this.aimUrl = data.data.data
            this.$router.push({
              name: 'homeIndex'
            })
          } else {
            this.$store.dispatch('showTips', {
              show: true,
              message: info
            })
          }
        }
      )
    },                                // 更改我的公益组织
    initial () {
      let formData = {
        data: {},
        token: ''
      }
      findOrgan(JSON.stringify(formData)).then(
        (data) => {
          this.organs = data.data.data
        }
      )
    },                                // 初始化数据
    searchOrgan () {
      let formData = {
        data: {
          organName: this.searchWords,
          uid: localStorage.uid
        },
        token: localStorage.token
      }
      findOrganByName(JSON.stringify(formData)).then(
        (data) => {
          // console.log(data.data)
          // 查询结果显示
          this.doSearch = true
        }
      )
    },                                // 查询公益组织
    goBack () {
      let formData = {
        data: {
          organName: this.searchWords,
          uid: localStorage.uid
        },
        token: localStorage.token
      }
      addOrgan(JSON.stringify(formData)).then(
        (data) => {
          var info = check(data)
          if (typeof (info) === 'boolean') {
            this.$store.dispatch('showTips', {
              show: true,
              message: '已经发出邀请'
            })
            this.doSearch = false
            this.search = false
            this.searchWords = ''
          } else {
            this.$store.dispatch('showTips', {
              show: true,
              message: info
            })
          }
        }
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.invite {
  width: 100vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 40px;
  padding: 30px;
  span {
    color: #426bf2;
    margin: 30px 0;
  }
  .doInvite {
    background-color: #426bf2;
    margin: 30px;
    width: 580px;
    height: 150px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
  }
  p {
    text-align: center;
    font-size: 36px;
    color: #999999;
    margin: 0 40px;
  }
}
.main {
  background-color: #fff;
}
header {
  flex: 0 0 auto;
  width: 100%;
  height: 98px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  span {
    padding: 0 30px;
    font-size: 32px;
    color: #007aff;
    cursor: pointer;
  }
  .icon {
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0 30px;
    color: #999999;
  }
}
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: hidden;
  h3 {
    flex: 0;
    font-size: 48px;
    width: 540px;
    margin: 0 auto;
    font-weight: normal;
  }
  .wrapper {
    flex: 1;
    height: 85vh;
    overflow: scroll;
  }
  .logo {
    margin: 0 75px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding-bottom: 200px;
    width: 600px;
    img {
      margin-top: 40px;
      width: 280px;
      height: 280px;
      border: 1px solid #333333;
      &.active {
        box-shadow: 0 0 0 8px #3d68be;
      }
    }
  }
  .searchBox {
    display: block;
    caret-color: #426bf2;
    font-size: 48px;
    max-width: 300px;
    &::-webkit-input-placeholder,
    &::-ms-input-placeholder {
      font-size: 48px;
      color: #999;
    }
    border: 0px;
  }
}
footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 207px;
  display: flex;
  justify-content: center;
  button {
    width: 600px;
    height: 136px;
    transform: translateY(57px);
    font-size: 40px;
    background-color: #3d68be;
    color: #fff;
  }
  box-shadow: 5px 9px 8px 12px rgba(4, 0, 0, 0.14);
}
</style>
